<template>
  <div class="h100" ref="projectTableList">
    <s-table
      ref="table"
      class="h100"
      :rowKey="record=>record.id"
      :columns="columns"
      :data="loadData"
      @getPagination="getPagination"
    >  
      <template slot="type" slot-scope="text">
        <table-ellipsis :text="$options.filters.DictLabelFilter(text,announceTypeEnumArr)||'-'"></table-ellipsis>
      </template>
      <template slot="pushChannel" slot-scope="text">
        <span v-for="item in text" :key="item">
          <span class="mr8">{{$options.filters.DictLabelFilter(item,pushChannelEnumArr)||'-'}}</span>
        </span>
      </template>
      <template slot="listStatus" slot-scope="text">
        <table-ellipsis :text="$options.filters.DictLabelFilter(text,listStatusEnumArr)||'-'"></table-ellipsis>
      </template>
       <template slot="operation" slot-scope="text,record" >
         <!-- 查看 -->
          <span style="display: flex;">
            <auth-button class="mr8" type="primary" :auth="managePerms.announce.view" :ghost="true" v-if="record.listStatus==3" size="small"  @click="view(record)"><i class="iconfont icon-yanjing"/>{{ $t('view') }}</auth-button>
            <auth-button
              class="mr8"
              v-else
              type="primary"
              :ghost="true"
              size="small"
              :auth="managePerms.announce.edit"
              @click="handleAddEdit(record)"
            ><i class="iconfont icon-xiugai"/>{{ $t('edit') }}</auth-button>
            <auth-button class="mr8" type="primary" :auth="managePerms.announce.test" :ghost="true" size="small"  @click="test(record)" v-if="record.listStatus==1||record.listStatus==4"><i class="iconfont icon-fuzhi"/>{{ $t('test') }}</auth-button>
            <auth-button class="mr8" type="primary" :auth="managePerms.announce.publish" :ghost="true" size="small" v-if="record.listStatus==2" @click="publish(record)"><i class="iconfont icon-fuzhi"/>{{ $t('publish') }}</auth-button>
            <auth-button class="mr8" type="primary" :auth="managePerms.announce.withdraw" v-if="(record.pushChannel==1||record.pushChannel==2)&&record.listStatus==3" :ghost="true" size="small"  @click="withdraw(record)"><i class="iconfont icon-fuzhi"/>{{ $t('withdraw') }}</auth-button>
            <auth-button
              class="mr8"
              type="danger"
              :ghost="true"
              size="small"
              :auth="managePerms.announce.delete"
              @click="deleteList(record)"
              style="word-break: keep-all;"
              v-if="record.listStatus!=3"
            ><i class="iconfont icon-shanchu3 deleteUlr"/>{{ $t('delete') }}</auth-button>
          </span>
        </template>
    </s-table>
    <!-- 公告详情 -->
    <a-modal
      :width="450"
      :visible="visibleDetail"
      :title="titleDetail"
      @cancel="()=>visibleDetail=false"
      :footer="null"
    >
     <div class="ql-container">
        <div class="ql-editor">
            <div v-if="!!publishDetail" v-html="publishDetail"></div>
            <div v-else>'暂无数据'</div>
        </div>
      </div>
    </a-modal>
    <!-- 测试弹框 -->
        <!-- 候选用户弹窗 -->
    <a-modal
      title="选择测试用户"
      :visible="visible"
      width="60%"
      @ok="handleTestOk"
      @cancel="handleCancel"
      :maskClosable="false"
      >
      <a-form-model>
        <span style="color:#F77474">*测试人数不能多于5人</span>
        <a-row :gutter="20">
          <!--用户数据-->
          <a-col :md="8" :sm="24">
            <div class="leftData" >
              <a-input-search v-model="searchValue" :placeholder="$t('pleaseInput')+$t('nameOrJobNumber')" enter-button @search="onUserSearch" />
              <div class="userInfo">
                <div class="singleUserInfo"  v-for="(item, index) in filterUserData"
                  :key="item.id" @click="addSelectedUser(item.id,index)">
                  <span>{{ item.name }}({{item.account}})</span> 
                   <img  src="@assets/toClick.png" alt="">
                </div>
              </div>
            </div>
          </a-col>
          <!-- 已选中的数据 -->
          <a-col :md="16" :sm="24">
            <div class="rightData">
              <p class="selectedData">已选:</p>
                <span class="mr8 tag" v-for="(item, index) in selectedUserData" :key="item.index">
                <a>{{item.name}}</a>
                <a-icon type="close-circle" theme="filled" @click="handleRemove(item.id, index)"/>
              </span>
            </div>
          </a-col>
        </a-row>
      </a-form-model>          
    </a-modal>

  </div>
</template>
<script>
import { 
  sysAnnounceTbColumns,
  pushChannelEnumArr,
  announceTypeEnumArr,
  listStatusEnumArr 
} from '../config/list'
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import sysAnnounceApi from '@/api/modules/system/announce'
import { mapState } from 'vuex'
import { STable } from '@/components'
import AuthText from '@/components/AuthText'
import { managePerms } from '@/config/permission/index'
import { checkTextLen } from '@/utils/validate'
export default {
  components: {
    tableEllipsis,
    STable,
    AuthText
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.sysAnnounce.queryParams,
      order: (state) => state.sysAnnounce.order
    }),
    commonColumns () {
      return this.columns
    }
  },
   props: {
    userData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      searchValue:undefined,
      columns: sysAnnounceTbColumns,
      managePerms,
      pushChannelEnumArr,
      announceTypeEnumArr,
      listStatusEnumArr,
      visible:false,
      visibleDetail:false,
      titleDetail:'',
      publishDetail:'',
      testFormId:'',
      selectedUserData:[],
      filterUserData:[],
      testUserIds:[]
    }
  },
  watch: {
  },
  created () {
  },
  methods: {
    view(record){
      this.visibleDetail=true
      this.titleDetail=record.name
      this.publishDetail=record.content
    },
    test(record){
      this.visible=true
      this.testFormId=record.id
      this.searchValue=undefined
      this.filterUserData=this.userData
      this.testUserIds=[]
      this.selectedUserData=[]
    },
      // 搜索用户
    onUserSearch(val){
      this.filterUserData=this.userData.filter(item=>{return (item.name.includes(val)||item.account.includes(val))&&!this.testUserIds.includes(item.id)}  )
    },
    addSelectedUser(id,index){
      let a=this.filterUserData.splice(index,1)
      this.selectedUserData=[...this.selectedUserData,...a]
      this.testUserIds.push(id)
    },
    handleRemove(id,index){
      this.selectedUserData=this.selectedUserData.filter((item) => {
      return item.id !== id
      })
      let a=this.selectedUserData.splice(index,1)
      this.filterUserData=[...this.filterUserData,...a]
      this.testUserIds.splice(index,1)
    },
    handleCancel(){
      this.visible = false
    },
    handleTestOk(){
      if (this.testUserIds.length>0) {
        if(this.testUserIds.length>5){
          this.$message.warning(this.$t('测试人数不能多于5人'))
          return
        }
        let model={
          id:this.testFormId,
          testUserIds:this.testUserIds
        }
          sysAnnounceApi.testAnnounceData(model).then(res => {
          if (res.code=='0') {
            this.$message.success("测试成功")
            this.visible = false
            this.refreshData(true)
          } else {
            this.$message.warning(res.message)
          }
        })
      }else{
        this.$message.warning(this.$t('pleaseSelect') + this.$t('测试人员'))
      }
    },
    publish(record){
      const vm = this
      this.$confirm({
        title: vm.$t('tip'),
        content: vm.$t('确定要发布') + '(' + record.name + ')表单吗',
        class: 'confirmStyle',
        icon: '<Icon >',
        onOk() {
         sysAnnounceApi.publishAnnounceData({id:record.id}).then((res) => {
            vm.$message.success(vm.$t('发布成功'))
            vm.refreshData(true)
          })
        },
        onCancel() {}
      })
    },
    withdraw(record){
      const vm = this
      this.$confirm({
        title: vm.$t('tip'),
        content: vm.$t('你确定要撤回') + '(' + record.name + ')表单吗',
        class: 'confirmStyle',
        icon: '<Icon >',
        onOk() {
         sysAnnounceApi.withdrawSysAnnounceData({id:record.id}).then(() => {
            vm.$message.success(vm.$t('撤回成功'))
            vm.refreshData(true)
          })
        },
        onCancel() {}
      })
    },
    handleAddEdit(record){
       this.$emit('handleAddEdit', record);
    },
    deleteList(record){
      const vm = this
      this.$confirm({
        title: vm.$t('tip'),
        content: vm.$t('你确定要删除') + '(' + record.name + ')表单吗',
        class: 'confirmStyle',
        icon: '<Icon >',
        onOk() {
         sysAnnounceApi.deleteSysAnnounceData({id:record.id}).then(() => {
            vm.$message.success(vm.$t('successfullyDelete'))
            vm.refreshData(true)
          })
        },
        onCancel() {}
      })
    },
    loadData (parameter) {
      this.$store.commit('setOrder', parameter.order)
      const params = { ...parameter, ...this.queryParams }
      return sysAnnounceApi.getSysAnnouncePageData(params)
    },
    getPagination () {

    },
    refreshData (isToFirstPage = true) {
      const vm = this
      vm.$nextTick(() => {
        vm.$refs.table.refresh(isToFirstPage)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.mr8{
  margin-right:8px
}
.tag{
  padding: 5px;
  height: 20px;
  line-height: 30px;
  border: 1px solid #649eb3;
  border-radius:16px ;
  color: #649eb3;
  a{
    display: inline-block;
    height: 20px;
    padding-right:5px ;
    font-weight: lighter;
  }
  i{
    display: inline-block;
    cursor: pointer;
  }
}
.leftData{
  border-right: 1px solid #d9d9d9;
  padding: 15px 15px 0px 0px;
  height: 420px;
  .userInfo{
    margin-top: 8px;
    height: calc(100% - 45px);
    overflow-y: scroll;
    .singleUserInfo{
      display: flex;
      justify-content: space-between;
      background-color:#F9F9F9 ;
      padding: 3px;
      margin-bottom: 4px;
    }
  }

}
.rightData{
  .selectedData{
    font-size: 16px;
    margin-bottom: 10px;
  }
}
</style>
